@import "compass/css3";

$cheeckboxBackgroundTop: #0669D8 !default;
$cheeckboxBackgroundBottom: #0669D8 !default;

/* .squaredThree */
.squaredThree {
  width: 20px;
  position: relative;
  margin: 20px auto;
  label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    @include background( linear-gradient(top, $cheeckboxBackgroundTop 0%, $cheeckboxBackgroundBottom 100%) );
    @include border-radius( 4px );
    @include box-shadow( inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4) );
    &:after {
      content: '';
      width: 12px;
      height: 8px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid #fcfff4;
      border-top: none;
      border-right: none;
      background: transparent;
      @include opacity( 0 );
      @include transform( rotate(-45deg) );
    }
    &:hover::after {
      @include opacity( 0.3 );
    }
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label:after {
      @include opacity( 1 );
    }    
  }
}
/* end .squaredThree */
